<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>消费者个人中心</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/csm_personal.css">
</head>
<body>
    <%@ include file="consumer_navbar.jsp" %>
    <!-- 页面内容 -->
    <div class="per-wrapper">
        <div class="header">个人中心</div>
        <!-- 个人信息部分 -->
        <div class="user-info">
            <p class="left"><strong>姓名：</strong>${consumerName != null ? consumerName : 'NULL'}</p>
            <p class="right"><strong>账号：</strong>${consumerId}</p><br><br>
        </div>
        <!-- 功能链接 -->
        <div class="user-links">
            <ul>
                <li><button type="button" onclick="showEditModal()">修改个人信息</button></li>
                <li><button type="button" onclick="showPasswordModal()">修改密码</button></li>
                <li><a href="${pageContext.request.contextPath}/consumer/personal/apply-farmer">申请成为农户</a></li>
            </ul>
        </div>
    </div>

    <!-- 编辑个人信息弹窗 -->
    <div id="editModal" class="modal" style="display:none;">
      <form action="${pageContext.request.contextPath}/consumer/personal/edit" method="post">
        <div class="header">编辑个人信息</div>
        <label>账号：<input type="text" name="username" value="${consumerId}" readonly></label><br><br>
        <label>姓名：<input type="text" name="realName" value="${consumerName}" required></label><br><br>
        <label>手机号：<input type="text" name="phone" value="" required></label><br><br>
        <label>邮箱：<input type="email" name="email" value="" required></label><br><br>
        <button type="submit">保存修改</button>
        <button type="button" onclick="closeEditModal()">取消</button>
      </form>
    </div>

    <!-- 修改密码弹窗 -->
    <div id="passwordModal" class="modal" style="display:none;">
      <form action="${pageContext.request.contextPath}/consumer/personal/password" method="post">
        <div class="header">修改密码</div>
        <label>原密码：<input type="password" name="oldPassword" required></label><br><br>
        <label>新密码：<input type="password" name="newPassword" required></label><br><br>
        <label>确认新密码：<input type="password" name="confirmPassword" required></label><br><br>
        <button type="submit">修改密码</button>
        <button type="button" onclick="closePasswordModal()">取消</button>
      </form>
    </div>

    <style>
    .modal {
      position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 9999;
    }
    .modal form {
      background: #fff; padding: 30px; border-radius: 8px; min-width: 300px;
    }
    </style>
    <script>
    function showEditModal() {
      document.getElementById('editModal').style.display = 'flex';
    }
    function closeEditModal() {
      document.getElementById('editModal').style.display = 'none';
    }
    function showPasswordModal() {
      document.getElementById('passwordModal').style.display = 'flex';
    }
    function closePasswordModal() {
      document.getElementById('passwordModal').style.display = 'none';
    }
    </script>
    <!-- 注：Controller需传递consumerName、consumerId到model中 -->
</body>
</html>